.article {
  flex: 300 300 auto !important;
  margin: 0 10px 10px;

  .catalog {
    border-right: 1px solid #e2e2e2;
    background-color: #f6f7f9;

    :global {
      .kd-layout-sider-children {
        display: flex;
        flex-direction: column;
      }
    }

    h3 {
      margin: 0;
      padding: 0 20px;
      color: #fff;
      font-size: 14px;
      line-height: 40px;
      background: linear-gradient(315deg, #875bfc 0%, #5a98ff 100%);
    }

    .operation {
      justify-content: flex-end;
      padding: 9px 12px;
      background-color: #fff;

      a {
        font-size: 14px;
      }
    }

    .list {
      flex: 1 1 auto;
      padding: 22px 0;
      overflow: auto;
      text-align: center;

      li {
        display: inline-block;
        position: relative;
        width: 280px;
        height: 132px;
        margin: 0;
        text-align: left;
        overflow: hidden;
        border-radius: 8px;
        cursor: pointer;

        &:not(:last-child) {
          margin-bottom: 14px;
        }

        &.active::after {
          position: absolute;
          top: -20px;
          left: -20px;
          width: 40px;
          height: 40px;
          padding: 5px;
          font-family: 'kdicon';
          -webkit-font-smoothing: antialiased;
          display: inline-block;
          text-align: right;
          line-height: 48px;
          content: '';
          border-radius: 50%;
          color: #fff;
          font-size: 12px;
          background-color: #5e89f3;
        }

        img {
          z-index: 0;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

        .desc {
          z-index: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          position: relative;
          height: 100%;
          padding: 16px;

          h4 {
            margin: 0;
            color: #585858;
            font-size: 18px;
            width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          p {
            width: 140px;
            margin: 0;
            color: #585858;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
    }

    .preview {
      position: relative;
      padding: 16px;
      text-align: center;
      background: #fff;

      &::before {
        position: absolute;
        top: -10px;
        left: 0;
        width: 100%;
        height: 10px;
        content: '';
        background: linear-gradient(180deg, rgba(246, 247, 249, 0) 0%, #f6f7f9 100%);
      }

      :global {
        .kd-btn {
          font-size: 12px;
        }
      }
    }
  }

  .cont {
    padding: 20px 50px;
    background-color: #fff;
    overflow: auto;

    .describe {
      color: #7f93bc;
      font-size: 12px;
      margin-bottom: 5px;
    }

    .text {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      margin-bottom: 5px;
    }

    .selectBg {
      :global {
        .kd-radio {
          padding-left: 0;
          padding-bottom: 25px;

          &:not(:last-child) {
            margin-right: 24px;
          }

          > span {
            padding: 0;
          }

          &::before {
            left: 50%;
            top: auto;
            bottom: 0;
            transform: translateX(-50%);
          }

          &::after {
            left: 50%;
            top: auto;
            bottom: 2px;
            transform: translateX(-50%) !important;
            animation: kdRadioEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
          }

          .kd-upload .kd-upload-picture-list-item {
            width: 130px;
            height: 130px;
            margin: 0;
            border-radius: 4px;
            border: 1px dashed #c7cbd3;
          }
        }
      }
    }

    .editor {
      border: 1px solid #eaebf0;
      color: #212121;

      .bf-content {
        height: 170px;
      }
    }
  }
}
